<template>
  <div class="pt-0.5">
    <!--    商品-->
    <nuxt-link
      :to="$localePath(`/goods/${sItem.urlName || sItem.id}`)"
      external
      class="h-16 group flex cursor-pointer items-center text-[#fff] mb-4"
      v-for="sItem in hotGoodsInfo"
      :key="sItem.id">
      <y-image
        class="w-16 h-16 ltr:mr-2.5 rtl:ml-2.5 shrink-0 rounded overflow-hidden"
        :alt="`how to recharge ${sItem.name}`"
        :src="$withPicOrigin(sItem.smallIcon)"
        height="60"
        width="60" />
      <div>
        <h3 class="group-hover:underline line-clamp-2 text-sm lg:text-base lg:font-normal text-white1">
          {{ sItem.name }}
        </h3>
        <span class="mt-0.5 line-clamp-1 text-xs text-gray-light text-[rgba(255,255,255,0.6)]">
          {{ sItem.areaCode }}
        </span>
      </div>
    </nuxt-link>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WIcon from '~/components/logic/WIcon.vue'

const props = defineProps(['hotGoodsInfo', 'lazyImage'])
</script>

<style lang="scss"></style>
